<template>
  <div class="content">
    <div>
      <h5>ID 为{{ props.id }}的人员信息为：</h5>
      <p>姓名：{{ person.name }}</p>
      <p>年龄：{{ person.age }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
// import {watchEffect} from 'vue';

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

// 这里的默认值，能否赋值为空？
const person = ref({})
const loading = ref(false)

// 获取详情的方法
const fetchDetail = (id) => {
  console.log('新的id为----> ', id || '空')

  if (!id) return

  // 此处一般需要处理加载状态
  loading.value = true

  // 模拟异步请求
  setTimeout(() => {
    person.value = {
      name: 'xiaohong',
      age: 19
    }

    // 如果是真实的接口请求， loading结束一般放在什么位置？？
    loading.value = false
  }, 600)
}

// 能把fetchDetail 直接写在这里吗？
// fetchDetail()

watch(
  // 这里能写成 props.id 吗？ 或者 props 呢？
  () => props.id,
  (newVal) => {
    // 模拟api请求
    fetchDetail(newVal)
  }
  // { immediate: true }
)

// watchEffect(() => fetchDetail(props.id))
</script>
